/*
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-05-15 15:02:52
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-09-23 16:09:04
 * @FilePath: \myWorkspace\react-basic\src\App.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * import 
 
vue 和 react 都是 js 框架，均是 mvvm 框架和 SPA 单页应用，通过数据更新驱动试图的更新二者在应用场景方面是有一定区别的，
vue 源码设计之初其目的就是让用户更好的上手，封装的很彻底。
因此 vue 非常适合移动端、中小型 pc 端项目的开发，目前很多大公司都是 react 开发
目前 react 最新版本已经达到 18 了，react 更新迭代很快，
基本上一年一更，react 是由 Facebook 公司开源的，生态非常完善，react 还有一套源码 react-native 用于移动端开发

npm i -g creat-react-app

npm install react-router-dom
React Router是React中用于路由的标准库。它使React应用中的各种组件之间的导航成为可能。它允许更改浏览器URL并将UI与URL同步。React Router对于创建具有导航功能的单页应用(SPA)很重要。
*/
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Child1 from '@/components/child1/child1.jsx'
import Fuandzi from '@/components/fuandzi/parent.jsx'
import Zuxian from '@/components/zuxian/parent.jsx'
import TodoList from '@/components/TodoList/parent.jsx'
import Qizi from '@/components/qizi/parent.jsx'
import Scoreboard from '@/components/statesUse/index.jsx'
import { ShowTest, ChangeTest, TodoList1 } from '@/components/test/index.jsx'
import MainRouter from '@/router/index.jsx'
import Headered from '@/router/headered.jsx'

// function App() {
//   const [count, setCount] = useState(0)

//   return (
//     <>
//       <div>
//         <a href="https://vitejs.dev" target="_blank">
//           <img src={viteLogo} className="logo" alt="Vite logo" />
//         </a>
//         <a href="https://react.dev" target="_blank">
//           <img src={reactLogo} className="logo react" alt="React logo" />
//         </a>
//       </div>
//       <h1>Vite + React</h1>
//       <div className="card">
//         <button onClick={() => setCount((count) => count + 1)}>
//           count is {count}
//         </button>
//         <p>
//           Edit <code>src/App.jsx</code> and save to test HMR
//         </p>
//       </div>
//       <p className="read-the-docs">
//         Click on the Vite and React logos to learn more
//       </p>
//     </>
//   )
// }
const songs = [
  { name: 'aa' },
  { name: 'bb' },
  { name: 'cc' }
]
const redb = {
  color: 'yellow'
}
function Divs(props) {
  const adds = [
    { age: 10 },
    { age: 20 },
    { age: 30 }
  ]
  const toDel = (id) => {
    console.log(id)
  }
  const toParent = (msg) => {
    props.backs(msg)
  }
  return <>
    <ul>{
      adds.map((item, index) => {
        return <li key={index} style={redb}><span>{item.age}</span><button onClick={() => toDel(index)}></button></li>
      })
    }</ul>
    <h1>{props.msg}</h1>
    <button onClick={() => toParent(props.msg + '123')}></button>
  </>
}
function fromchild(msg) {
  console.log(msg)
}
let allArr = ['aa', 'bb', 'cc', 'dd']
function TestProps(props) {
  let hasContent = props.size > 100 ? '有内容' : '无内容'
  let filer = allArr.filter((item, index) => {
    return <li key={index}>{item}</li>
  })
  return (
    <div>
      <ul>{filer}</ul>
      <del><p>{props.size > 10 ? '大于10' : '小于10'}</p></del>
      <p>{hasContent}</p>
      <TodoList {...props}></TodoList>
    </div>
  )
}
function App() {
  // useState函数返回一个数组，数组中有两个元素

  // 1、当前状态：这是状态的当前值，可以在组件中使用。

  // 2、状态修改函数：这是一个函数，可以用来更新状态的值。
  const [count, setCount] = useState(0)
  let [profile, setProfile] = useState({ name: 'John', age: 30 });

  // const initialList = [
  //   { id: 0, title: 'Big Bellies', seen: false },
  //   { id: 1, title: 'Lunar Landscape', seen: false },
  //   { id: 2, title: 'Terracotta Army', seen: true },
  // ];
  // const [list, setList] = useState(
  //   initialList
  // );

  // 数组是另一种可以存在状态中的可变 JavaScript 对象，应将其视为只读。就像对象一样，
  // 当你想更新存在状态中的数组时，你需要创建一个新数组（或者复制现有数组），然后用新数组来更新状态。

  // setList(list.map(artwork => {
  //   if (artwork.id === artworkId) {
  //     return { ...artwork, seen: nextSeen };
  //   } else {
  //     return artwork;
  //   }
  // }));


  function fromchild(msg) {
    console.log('fromchild', msg)
  }
  const callback = (msg) => {
    console.log('callback', msg)
  }
  const add = () => {
    setCount(preCount => preCount + 1)
    setCount(preCount => preCount + 1)

    // 更新状态时，总是创建一个新的对象或数组以保持不可变性。我们可以使用扩展运算符来实现这一点。
    setProfile({ ...profile, age: 100 });
  }
  const abs = 'msgaaa'
  const handleClick = () => {
    console.log('handleClick')
  }
  const Toolbar = () => {
    return (
      <div className="Toolbar" onClick={() => {
        alert('你点击了 toolbar ！');
      }}>
        <button onClick={() => alert('正在播放！')}>
          播放电影
        </button>
        <button onClick={() => alert('正在上传！')}>
          上传图片
        </button>
      </div>
    );
  }

  const Button = ({ onClick, children }) => {
    // 这个事件对象还允许你阻止传播。如果你想阻止一个事件到达父组件，你需要像下面 Button 组件那样调用 e.stopPropagation() ：
    return (
      <button onClick={e => {
        e.stopPropagation();
        onClick();
      }}>
        {children}
      </button>
    );
  }

  const Toolbar1 = () => {
    return (
      <div className="Toolbar" onClick={() => {
        alert('你点击了 toolbar ！');
      }}>
        <Button onClick={() => alert('正在播放！')}>
          播放电影
        </Button>
        <Button onClick={() => alert('正在上传！')}>
          上传图片
        </Button>
      </div>
    );
  }

  const Signup = () => {
    return (
      <form onSubmit={() => alert('提交表单！')}>
        <input />
        <button>发送</button>
      </form>
    );
  }

  const Signup1 = () => {
    // 些浏览器事件具有与事件相关联的默认行为。例如，点击 <form> 表单内部的按钮会触发表单提交事件，默认情况下将重新加载整个页面：
    return (
      <form onSubmit={e => {
        e.preventDefault();
        alert('提交表单！');
      }}>
        <input />
        <button>发送</button>
      </form>
    );
  }

  const Counter = () => {
    const [number, setNumber] = useState(0);

    return (
      <>
        <h1>{number}</h1>
        <button onClick={() => {

          // setNumber(number + 1); //0（未使用）  1
          // setNumber(number + 1); //0（未使用）  1
          // setNumber(number + 1); //0（未使用）  1

          setNumber(number + 5); // 5
          setNumber(n => n + 1); // 6
          setNumber(42); // 42

          // “替换为 5”	0（未使用）	5
          // n => n + 1	5	5 + 1 = 6
          // “替换为 42”	6（未使用）	42

          // 命名惯例
          // setEnabled(e => !e);
          // setLastName(ln => ln.reverse());
          // setFriendCount(fc => fc * 2);


          //       // 
          // 设置 state 不会更改现有渲染中的变量，但会请求一次新的渲染。
          //     React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。
          // 要在一个事件中多次更新某些 state，你可以使用 setNumber(n => n + 1) 更新函数。

        }}>增加数字</button>
      </>
    )
  }

  const Form = () => {
    const [person, setPerson] = useState({
      firstName: 'Barbara',
      lastName: 'Hepworth',
      email: 'bhepworth@sculpture.com'
    });

    function handleChange(e) {
      console.log('e', e)
      setPerson({
        ...person,
        [e.target.name]: e.target.value
      });
    }

    return (
      <>
        <label>
          First name:
          <input
            name="firstName"
            value={person.firstName}
            onChange={handleChange}
          />
        </label>
        <label>
          Last name:
          <input
            name="lastName"
            value={person.lastName}
            onChange={handleChange}
          />
        </label>
        <label>
          Email:
          <input
            name="email"
            value={person.email}
            onChange={handleChange}
          />
        </label>
        <p>
          {person.firstName}{' '}
          {person.lastName}{' '}
          ({person.email})
        </p>
      </>
    );
  }

  return (
    <>
      <div className='happy'>
        <p>{profile.age}</p>
        <button onClick={() => add()}>{count}........</button>
        <ul>
          {
            songs.map((item, index) => {
              return <li key={index} style={redb}>{item.name}</li>
            })
          }
        </ul>
        <Divs msg={abs} backs={callback} />
      // 父传子          子返父
        <Child1 msg={'to child'} callback={fromchild} />

        <Fuandzi />

        <Zuxian />

        <TodoList />

        <Qizi />

        <ShowTest />

        <ChangeTest />

        <TodoList1 size={'saas'} onSmash={() => alert('sasas')} />

        <TestProps msg={'msg'} size={100}></TestProps>


        <button onClick={handleClick}> 传递了 handleClick 函数。</button>
        <button onClick={() => alert('...')}> 传递了alert('...') 函数。</button>


        <Toolbar />

        <Toolbar1 />

        <Signup />

        <Signup1 />

        <Counter />

        <Form />

        <Scoreboard />

        <Headered></Headered>
        <MainRouter></MainRouter>

      </div>
    </>
  )

}
export default App
